<!--
 * @Description: 
 * @Version: 
 * @Autor: kkz <keke.zhang@seaboxdata.com>
 * @Date: 2024-03-06 17:55:23
 * @LastEditors: kkz
 * @LastEditTime: 2024-03-22 17:49:20
-->
<script setup>
import { ref } from 'vue'
import request from '@/utils/request'
const dialogVisible = ref(false)
const formRef = ref()

const formModel = ref({
  organizationName: '',
  organizationDescription: ''
})
const rules = {
  organizationName: [
    { required: true, message: '请输入部门名称', trigger: 'blur' },
    // 正则，非空字符
    {
      pattern: /^\S{1,10}$/,
      message: '分类名必须是1-10位的非空字符',
      trigger: 'blur'
    }
  ],
  organizationDescription: [{ required: true, message: '请输入部门描述', trigger: 'blur' }]
}
// 提交校验
const emit = defineEmits(['success'])
const onSubmit = async () => {
  await formRef.value.validate()
  if (formModel.value.id) {
    request
      .post('/organization/update', {
        id: formModel.value.id,
        organizationName: formModel.value.organizationName,
        organizationDescription: formModel.value.organizationDescription
      })
      .then((res) => {
        console.log(res)
        if (res.data) {
          ElMessage({
            type: 'success',
            message: formModel.value.id ? '编辑成功' : '添加成功'
          })
          // 关闭弹窗
          dialogVisible.value = false
          emit('success')
        }
      })
  } else {
    request
      .post('/organization/add', {
        organizationName: formModel.value.organizationName,
        organizationDescription: formModel.value.organizationDescription
      })
      .then((res) => {
        console.log(res)
        if (res.data) {
          ElMessage({
            type: 'success',
            message: formModel.value.id ? '编辑成功' : '添加成功'
          })
          // 关闭弹窗
          dialogVisible.value = false
          emit('success')
        }
      })
  }
}

// 组件对外暴露一个方法 open,  基于 open 的参数，初始化表单数据，并判断区分是添加 还是 编辑
//1. open({ })                   =>  添加操作，添加表单初始化无数据
//2. open({ id: xx,  ...  })  =>  编辑操作，编辑表单初始化需回显
//open调用后，可以打开弹窗
const open = async (row) => {
  dialogVisible.value = true
  console.log('row', row)
  formModel.value = { ...row } // 添加：重置表单内容，编辑：回显数据
}
//暴露方法
defineExpose({
  open
})
</script>

<template>
  <el-dialog
    v-if="dialogVisible"
    v-model="dialogVisible"
    :title="formModel.id ? '编辑部门' : '添加部门'"
    width="30%"
  >
    <el-form
      ref="formRef"
      :model="formModel"
      :rules="rules"
      label-width="100px"
      style="padding-right: 30px"
    >
      <el-form-item label="部门名称" prop="organizationName">
        <el-input v-model="formModel.organizationName" minlength="1" maxlength="10"></el-input>
      </el-form-item>
      <el-form-item label="部门说明">
        <el-input v-model="formModel.organizationDescription" rows="4" type="textarea"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
